﻿@page
@using Dignite.Abp.AspNetCore.Mvc.UI.Theme.Pure.Demo.Menus
@using Microsoft.AspNetCore.Http.Extensions
@model Dignite.Abp.AspNetCore.Mvc.UI.Theme.Pure.Demo.Pages.IndexModel
@{
    PageLayout.Content.Title = "Home Page";
    PageLayout.Content.MenuItemName = PureThemeDemoMenus.Home;
    PageLayout.Content.BreadCrumb.ShowHome = false;
    PageLayout.Content.BreadCrumb.ShowCurrent = false;

    //SET SEO INFO
    Html.SetSeoInfo(seoInfo =>
    {
        seoInfo.SetCommonInfo(
            PageLayout.Content.Title, 
            "Home page description",
            HttpContext.Request.GetDisplayUrl(),
            new string[] { "Dignite", "PureTheme" }
        );
    });
}

@section content_toolbar {
    <nav class="nav mx-auto">
        <a class="nav-link active underline-animate px-0 mx-3" aria-current="page" href="#">Active</a>
        <a class="nav-link underline-animate px-0 mx-3" href="#">Link</a>
        <div class="dropdown">
            <a class="nav-link dropdown-toggle underline-animate px-0 mx-3" href="#" id="Menu_PureThemeDemo.Components" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Components
            </a>
            <div class="dropdown-menu" aria-labelledby="Menu_PureThemeDemo.Components">
                <a class="dropdown-item  " href="/Alerts" id="MenuItem_PureThemeDemo_Components_Alerts">
                    Alerts
                </a>
                <a class="dropdown-item  " href="#" id="MenuItem_PureThemeDemo_Components_Badges">
                    Badges
                </a>
                <a class="dropdown-item  " href="#" id="MenuItem_PureThemeDemo_Components_Borders">
                    Borders
                </a>
                <a class="dropdown-item  " href="#" id="MenuItem_PureThemeDemo_Components_Breadcrumbs">
                    Breadcrumbs
                </a>
                <a class="dropdown-item  " href="#" id="MenuItem_PureThemeDemo_Components_ButtonGroups">
                    Button Groups
                </a>
                <a class="dropdown-item  " href="#" id="MenuItem_PureThemeDemo_Components_Buttons">
                    Buttons
                </a>
            </div>
        </div>
        <button type="button" class="btn">
            <i class="fa fa-search d-block"></i>
        </button>
    </nav>
}

<h1 class="my-5">Pure Theme Demo</h1>

<h2>Color Modes</h2>
<div class="mb-5">
    <button type="button" class="btn btn-secondary" data-bs-theme-value="auto">Auto Mode</button>
    <button type="button" class="btn btn-dark" data-bs-theme-value="dark">Dark Mode</button>
    <button type="button" class="btn btn-light" data-bs-theme-value="light">Light Mode</button>
</div>


<h2>Animation of underline </h2>
<div class="row mb-5">
    <div class="col-md-4">
        <a href="#" class="underline-animate">A Link</a>
    </div>
    <div class="col-md-4">
        <h3>
        <a href="#" class="underline-animate fw-semibold">A semibold Link</a>
        </h3>
    </div>
    <div class="col-md-4">
        <h1>
        <a href="#" class="underline-animate fw-bolder">A bolder Link</a>
        </h1>
    </div>
    <div class="col-md-4">
        <a href="#" class="underline-animate text-secondary">Text Secondary Link</a>
    </div>
</div>
<div class="my-5">
    <img src="https://cn.bing.com/th?id=OHR.SpringApple_ZH-CN0101917345_1920x1080.jpg" class="img-fluid">
</div>